<template>
  <div>
    <a-form
      class="ant-advanced-search-form"
      :form="form"
      @submit="handleSearch"
    >
      <a-row :gutter="24">
        <a-col v-for="(item, index) in ctrlResetCmd" :key="index" :span="8">
          <a-form-item :label="item.name">
            <a-button @click="sendResetCmd(item)">下发命令</a-button>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="带负载开锁">
            <a-button @click="onDoor(true)">下发命令</a-button>
          </a-form-item>
        </a-col>
        <a-col :span="16">
          <a-form-item label="频闪灯控制">
            <a-switch
              style="width: 10%; float: left; margin-top: 10px"
              checked-children="开"
              un-checked-children="关"
              default-checked
              @change="onOpenLight"
            />
            <a-slider
              style="width: 40%; float: left; margin-left: 30px"
              id="test"
              :default-value="30"
              :max=255
              :disabled="disabled"
              @afterChange="onChangeLightness"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item label="复位交换机">
            <a-button @click="resetLan">下发命令</a-button>
          </a-form-item>
        </a-col>
        <a-col :span="16">
          <a-form-item label="干节点控制" style="margin-left: 10px">
            <span style="float: left">主板</span>
            <a-input
              v-model="board"
              style="float: left; width: 100px; margin-left: 5px"
            ></a-input>
            <span style="float: left; margin-left: 5px">编号</span>
            <a-input
              style="float: left; width: 100px; margin-left: 5px"
              v-model="sno"
            ></a-input>
            <a-switch
              style="width: 10%; float: left; margin-top: 5px; margin-left: 5px"
              checked-children="开"
              un-checked-children="关"
              default-checked
              @change="onChangeSwitch"
            />
          </a-form-item>
        </a-col>
       
      </a-row>
    </a-form>
    <limit-cfg></limit-cfg>
  </div>
</template>
<script>
import LimitCfg from "../limtcfg/LimitCfg.vue";
import { ctrlService } from "@/services/ctrl.js";

export default {
  name: "ctrl",
  components: { LimitCfg },
  data() {
    return {
      disabled:false,
      expand: true,
      board: "",
      sno: "",
      trapIP:"",
      trapPort:"57125",
      form: this.$form.createForm(this, { name: "advanced_search" }),
      ctrlResetCmd: [
        { id: "SysReset", name: "复位系统" },
        { id: "ESwReset", name: "复位重合闸" },
        { id: "SpdClear", name: "清空雷电计数" },
      ],

      //ctrlSubNode:[{id:'1',name:"带保护开始"},{id:'2',name:"清空雷电计数"}],
    };
  },
  computed: {
    count() {
      return this.expand ? 11 : 7;
    },
  },
  updated() {
    console.log("updated");
  },
  methods: {
    handleSearch(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        console.log("error", error);
        console.log("Received values of form: ", values);
      });
    },
    resetLan() {
      let param = {};
      param["Act"] = "Off";
      param["Outlet"] = "2";
      param["Board"] = "3";
      ctrlService(
        this.$store.state.thingView.activeThing.tid,
        "SetOutlet",
        param
      );
      setTimeout(() => {
        param["Act"] = "On";
        ctrlService(
          this.$store.state.thingView.activeThing.tid,
          "SetOutlet",
          param
        );
      }, 5000);
    },
    sendResetCmd(item) {
      console.log("--------------------", item);
      let param = {};
      param[item.id] = "On";
      ctrlService(this.$store.state.thingView.activeThing.tid, "ActSys", param);
    },
    onDoor(checked) {
      let param = {};
      param["lock status"] = checked ? "On" : "Off";
      ctrlService(this.$store.state.thingView.activeThing.tid, "lock", param);
    },
    onChangeSwitch(checked) {
      let param = {};
      param["Act"] = checked ? "On" : "Off";
      param["Outlet"] = this.sno;
      param["Board"] = this.board;
      ctrlService(
        this.$store.state.thingView.activeThing.tid,
        "SetOutlet",
        param
      );
    },
    onOpenLight(checked) {
      let param = {};
      param["light status"] = checked ? "On" : "Off";
      ctrlService(
        this.$store.state.thingView.activeThing.tid,
        "light status",
        param
      );
    },
    onChangeLightness(val) {
      let param = {};
      param["lightness"] = val.toString();
      ctrlService(
        this.$store.state.thingView.activeThing.tid,
        "lightness",
        param
      );
    },

    toggle() {
      this.expand = !this.expand;
    },
  },
};
</script>
<style>
.ant-advanced-search-form {
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
</style>